<template>
  <div class="materialChart" ref="materialChart">

  </div>
</template>

<script>
  var echarts = require('echarts')
  export default {
    data() {
      return {
        category:['沙子','水泥','钢筋','石子']
      }
    },
    methods: {
      materialChart() {
        var myChart = echarts.init(this.$refs.materialChart)
        var category = ['沙子', '水泥', '钢筋', '石子'];

        var lineData = [5,6,4,8];
        var barData = [2,4,1,7];

        myChart.setOption({
          title:{
            text: '物料库存情况',
            
          },
          backgroundColor: '#0f375f',
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['line', 'bar'],
            textStyle: {
              color: '#ccc'
            }
          },
          xAxis: {
            data: category,
            axisLine: {
              lineStyle: {
                color: '#ccc'
              }
            }
          },
          yAxis: {
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: '#ccc'
              }
            }
          },
          series: [{
            name: 'line',
            type: 'line',
            smooth: true,
            showAllSymbol: true,
            symbol: 'emptyCircle',
            symbolSize: 15,
            data: lineData
          }, {
            name: 'bar',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              barBorderRadius: 5,
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#14c8d4' },
                  { offset: 1, color: '#43eec6' }
                ]
              )
            },
            data: barData
          }, {
            name: 'line',
            type: 'bar',
            barGap: '-100%',
            barWidth: 10,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: 'rgba(20,200,212,0.5)' },
                  { offset: 0.2, color: 'rgba(20,200,212,0.2)' },
                  { offset: 1, color: 'rgba(20,200,212,0)' }
                ]
              )
            },
            z: -12,
            data: lineData
          }, {
            name: 'dotted',
            type: 'pictorialBar',
            symbol: 'rect',
            itemStyle: {
              color: '#0f375f'
            },
            symbolRepeat: true,
            symbolSize: [12, 4],
            symbolMargin: 1,
            z: -10,
            data: lineData
          }]
        })
        
        
      },


    },
    mounted() {
      this.materialChart()
    },
  }

</script>
<style lang='scss' scoped>
  div {
    width: 100%;
    height: 450px;
    color: white;
  }
</style>